<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>user_json.html</title>
		<script type="text/javascript" src="js/prototype1.6.js"></script>
		<script type="text/javascript">
			function loadData(){
				new Ajax.Request(
					"UserServlet",
					{
						method:"post",
						//onSuccess即xmlreq.readyState==4&&xmlreq.status==200
						//会传入xmlreq，用req接收
						onSuccess:function(req){
							//获取服务器响应的字符串信息，并转成json对象
							var json=req.responseText.evalJSON();
							clearTable("tb");
							for(i=0;i<json.length;i++){
								var tr=$("tb").insertRow($("tb").rows.length);
								var id_td=tr.insertCell(tr.cells.length);
								id_td.innerHTML=json[i].id;
								var name_td=tr.insertCell(tr.cells.length);
								name_td.innerHTML=json[i].name;
							}
						}
					}
				);
			}
			function load(){
				new Ajax.Request(
					"UserLikeServlet?time="+new Date().getTime(),
					{
						method:"post",
						parameters:{"username":$F("ctx")},
						//onSuccess即xmlreq.readyState==4&&xmlreq.status==200
						//会传入xmlreq，用req接收
						onSuccess:function(req){
							//获取服务器响应的字符串信息，并转成json对象
							var json=req.responseText.evalJSON();
							clearTable("t");
							for(i=0;i<json.length;i++){
								var tr=$("t").insertRow($("t").rows.length);
								//为tr添加鼠标背景色
								tr.onmouseover=function(){
									this.style.backgroundColor="green";
								}
								tr.onmouseout=function(){
									this.style.backgroundColor="white";
								}
								var id_td=tr.insertCell(tr.cells.length);
								id_td.innerHTML=json[i].id;
								var name_td=tr.insertCell(tr.cells.length);
								name_td.innerHTML=json[i].userName;
								//为name列追加单击事件
								name_td.onclick=function(){
									$("ctx").value=this.innerHTML;
									clearTable("t");
								}
							}
						}
					}
				);
			}
			function clearTable(table){
				for(i=$(table).rows.length-1;i>=0;i--){
					$(table).deleteRow(i);
				}
			}
		</script>
	</head>
	<body>
		<h1>prototype+json显示列表</h1>
		<input type="button" value="load" onclick="loadData()"/>
		<hr/>
		<table id="tb"></table><hr/>
		<h1>Prototype+JSON实现Google Suggest(或文本框的自动完成)功能</h1>
		<input type=text" name="ctx" id="ctx" onkeyup="load()"><br/>
		<table id="t"></table>
	</body>
</html>
